<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>门诊病历</title>
        <link rel="stylesheet" th:href="@{css/index.css}">
        <script type="text/javascript" th:src="@{jquery/jquery-1.12.4.min.js}"></script>
        <link th:href="@{bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <!--检索-->
            <div class="row" style="margin: 2px">
                <!--查询条件-->
                <div class="col-md-12" style="padding-left: 0px;padding-right: 0px">
                    <!--卡片-->
                    <div class="card bg-info text-white">
                        <div class="card-header">
                            <strong class="card-title"><i class="fa fa-filter"></i>查询条件</strong>
                        </div>
                        <div class="card-body bg-white">
                            <form class="form-inline" id="form_Condition" action="/mzList">
                                <input type="hidden" name="current" th:value="${page.current}" />
                                <input type="hidden" name="size" value="10" />
                                <div class="col-md-3">
                                    <div class="row">
                                        <label for="blbh" style="display: inline-block;width: 85px;text-align: right;line-height: 35px">病历编号：</label>
                                        <input type="text" class="form-control input-sm" id="blbh" name="blbh" th:value="${omrBl01.blbh}" style="width: 150px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="row">
                                        <label for="blmc" style="display: inline-block;width: 85px;text-align: right;line-height: 35px">病历名称：</label>
                                        <input type="text" class="form-control input-sm" id="blmc" name="blmc" th:value="${omrBl01.blmc}" style="width: 150px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="row">
                                        <label for="jzxh" style="display: inline-block;width: 85px;text-align: right;line-height: 35px">就诊序号：</label>
                                        <input type="text" class="form-control input-sm" id="jzxh" name="jzxh" th:value="${omrBl01.jzxh}" style="width: 150px;margin-right: 5px">
                                    </div>
                                </div>
                                <div class="col-md-3" style="padding: 3px 0px;">
                                    <div class="row">
                                        <div class="btn-group">
                                            <button type="submit" class="btn btn-info btn-sm" id="btn_Search">
                                                <i class="fa fa-search"></i>查询
                                            </button>
                                            <button type="button" class="btn btn-secondary btn-sm" id="btn_Clear">
                                                <i class="fa fa-eraser"></i>清空
                                            </button>
                                            <button type="button" class="btn btn-danger btn-sm" id="analysis">
                                                <i class="fa fa-edit"></i>解析
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <table class="table table-striped table-bordered table-hover" id="tableL01">
                <caption>门诊病历</caption>
                <tbody>
                    <tr>
                        <th style="width: 5%;">
                            <input type="checkbox" id="checkAll" />
                        </th>
                        <th>病历编号</th>
                        <th style="width: 20%;">病历名称</th>
                        <th>就诊序号</th>
                        <th>病人编号</th>
                        <th>病人姓名</th>
                        <th>书写医生</th>
                        <th style="width: 15%;">完成时间</th>
                        <th>病历类别</th>
                        <th style="width: 15%;">操作</th>
                    </tr>
                    <tr th:each="omrBl01,iterStat : ${page.getRecords()}" th:class="${iterStat.odd}? 'odd'">
                        <td style="text-align: center;">
                            <input type="checkbox" th:id="'ckbox_' + ${omrBl01.blbh}" th:value="${omrBl01.blbh}" />
                        </td>
                        <td style="text-align: center;" th:text="${omrBl01.blbh}"></td>
                        <td th:text="${omrBl01.blmc}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.jzxh}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.brid}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.brxm}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.sxys}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.wcsj}"></td>
                        <td style="text-align: center;" th:text="${omrBl01.bllb}"></td>
                        <td style="text-align: center; width: 15%;">
                            <button type="button" th:id="'analysis_' + ${omrBl01.blbh}" th:name="${omrBl01.blbh}" style="padding: 3px 12px;" class="btn runBtn btn-primary">重新解析</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="page-item disabled" th:if="${page.current == 1}"><span class="page-link">Previous</span></li>
                    <li class="page-item" th:if="${page.current > 1}"><a class="page-link" th:href="@{/mzList(current=${page.current - 1}, size=10)}">Previous</a></li>

                    <li th:if="${page.current == 1}" class="page-item active" aria-current="page"><span class="page-link">1</span></li>
                    <li th:if="${page.current > 1}"  class="page-item"><a class="page-link" th:href="@{/mzList(current=1, size=10)}">1</a></li>

                    <th:block th:if="${page.getPages() > 2 && page.getPages() <= 10}" th:each="i : ${#numbers.sequence(2, page.getPages() - 1)}">
                        <li th:if="${page.current == i}" class="page-item active" aria-current="page"><span class="page-link" th:text="${i}">页码</span></li>
                        <li th:if="${page.current != i}" class="page-item"><a class="page-link" th:href="@{/mzList(current=${i}, size=10)}" th:text="${i}">页码</a></li>
                    </th:block>

                    <th:block th:if="${page.getPages() > 10}">
                        <th:block th:if="${(page.current - (5/2)) <= 2}" th:each="i : ${#numbers.sequence(2, 2 + 5 - 1)}">
                            <li th:if="${page.current == i}" class="page-item active" aria-current="page"><span class="page-link" th:text="${i}">页码</span></li>
                            <li th:if="${page.current != i}" class="page-item"><a class="page-link" th:href="@{/mzList(current=${i}, size=10)}" th:text="${i}">页码</a></li>
                        </th:block>
                        <!-- ... -->
                        <li th:if="${(page.current - (5/2)) > 2}" class="page-item"><span class="page-link">...</span></li>

                        <th:block th:if="${((page.current - (5/2)) > 2) && ((page.current + (5/2) - (5%2==0?1:0)) < (page.getPages() - 1))}"
                                  th:each="i : ${#numbers.sequence(page.current - (5/2), page.current + (5/2)-(5%2==0?1:0))}">
                            <li th:if="${page.current == i}" class="page-item active"><span class="page-link" th:text="${i}">页码</span></li>
                            <li th:if="${page.current != i}" class="page-item"><a class="page-link" th:href="@{/mzList(current=${i}, size=10)}" th:text="${i}">页码</a></li>
                        </th:block>

                        <li th:if="${(page.current + (5/2) - (5%2==0?1:0)) < (page.getPages()-1)}" class="page-item"><span class="page-link">...</span></li>
                        <th:block th:if="${(page.current+(5/2)-(5%2==0?1:0)) >= (page.getPages()-1)}" th:each="i : ${#numbers.sequence(page.getPages() - 5, page.getPages() - 1)}">
                            <li th:if="${page.current == i}" class="page-item active"><span class="page-link" th:text="${i}">页码</span></li>
                            <li th:if="${page.current != i}" class="page-item"><a class="page-link" th:href="@{/mzList(current=${i}, size=10)}" th:text="${i}">页码</a></li>
                        </th:block>
                    </th:block>

                    <li th:if="${page.getPages() > 1 && page.current == page.getPages()}" class="page-item active" aria-current="page"><span class="page-link" th:text="${page.getPages()}"></span></li>
                    <li th:if="${page.getPages() > 1 && page.current < page.getPages()}"  class="page-item"><a class="page-link" th:href="@{/mzList(current=${page.getPages()}, size=10)}" th:text="${page.getPages()}">1</a></li>

                    <li class="page-item disabled"  th:if="${page.current >= page.getPages()}"><span class="page-link">Next</span></li>
                    <li class="page-item" th:if="${page.current  < page.getPages()}"><a class="page-link" th:href="@{/mzList(current=${page.getPages() - 1}, size=10)}">Next</a></li>
                </ul>
            </nav>

            <div class="modal fade" data-backdrop="static" tabindex="-1" id="progressbar">
                <!--窗口声明：-->
                <div class="modal-dialog modal-lg">
                    <!-- 内容声明 -->
                    <div class="modal-content">
                        <!-- 主体 -->
                        <div class="modal-body">
                            <div class="progress progress-striped">
                                <div id="progress" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                                    <span class="sr-only"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script th:inline="javascript" type="text/javascript">
            $.ajaxSetup({
                contentType: "application/json; charset=utf-8"
            });
            var ctxPath = [[${#request.getContextPath()}]];
            $(function () {
                $("#btn_Clear").click(function (){
                    $("#blbh").val("");
                    $("#blmc").val("");
                    $("#jzxh").val("");
                });

                $("#checkAll").click(function () {
                    let ckd = $(this).is(":checked")
                    if(ckd) {
                        $(":checkbox[id^='ckbox_']").prop("checked", true);
                    } else {
                        $(":checkbox[id^='ckbox_']").prop("checked", false);
                    }
                })

                $(":checkbox[id^='ckbox_']").click(function () {
                    let ckd = $(this).is(":checked")
                    if(ckd) {
                        let allLen = $(":checkbox[id^='ckbox_']").length;
                        let ckdLen = $(":checkbox[id^='ckbox_']:checked").length;
                        if(allLen == ckdLen) {
                            $("#checkAll").prop("checked", true);
                        }
                    } else {
                        $("#checkAll").prop("checked", false);
                    }
                })

                $("button[id^='analysis']").click(function () {
                    let id = $(this).attr("id");
                    let blbhArr = [];
                    if(id == "analysis") {
                        let ckdLen = $(":checkbox[id^='ckbox_']:checked").length;
                        if(ckdLen == 0) {
                            alert("请选择要解析的病历！");
                            return;
                        }
                        $(":checkbox[id^='ckbox_']:checked").each(function (i, e) {
                            blbhArr.push($(this).val());
                        })
                    } else {
                        blbhArr.push(id.substring(9));
                    }
                    if(blbhArr.length > 0) {
                        $("#progressbar").addClass("in").show();
                        $.post(ctxPath + "/mzAnalysis", JSON.stringify({"blbhs" : blbhArr.join(",")}), function (ret) {
                            $("#progress").css("width", "100%");
                            setTimeout(function (){
                                alert(ret.msg);
                                location.reload();
                            }, 1000);
                        });
                    }
                });
            });
        </script>
        <style>
            .table {
                margin-bottom: 0px;
            }
            nav {
                text-align: right;
            }
            .modal-dialog {
                margin: 15% auto;
            }
        </style>
    </body>
</html>